<template>
  <div id="single_select">
    <div v-for="item in options"
         :key="item"
         :value="item">
      <img @click="change(item)"
           src="../assets/meng/s1.png"
           v-show="now_value!=item">
      <img @click="change(item)"
           src="../assets/meng/s2.png"
           v-show="now_value==item">
      <span @click="change(item)">{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'single_select',
  components: {},
  data() {
    return {
      now_value: this.value,
    }
  },
  model: {
    prop: 'value',
    event: 'returnBack',
  },
  props: ['value', 'options'],

  created: function () {
    this.$watch('value', function (newValue, oldValue) {
      this.now_value = this.value
    })
  },
  mounted() {},
  methods: {
    change(parm) {
      this.now_value = parm
      this.$emit('returnBack', this.now_value)
    },
  },
}
</script>
<style scoped lang='less'>
#single_select {
  > div:last-child {
    margin-right: 0;
  }
  > div {
    display: flex;
    align-items: center;
    margin-right: 30px;
    img {
      width: 16px;
      cursor: pointer;
      height: 16px;
    }

    span {
      cursor: pointer;
      display: inline-block;
      padding-left: 12px;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 16px;
      letter-spacing: 0px;
      color: #222222;
    }
  }
  display: flex;
  height: fit-content;
  width: fit-content;
  align-items: center;
}
</style>
